<template>
  <span>
    <svg
      t="1734836911289"
      class="icon"
      viewBox="0 0 1024 1024"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      p-id="17657"
      :style="styleCpd"
    >
      <path
        d="M491.648 917.184L192 671.936v-320l299.648-245.248a32 32 0 0 1 52.288 24.896v760.96a32 32 0 0 1-52.288 24.704z m255.232-54.4a47.808 47.808 0 0 1-14.144-33.92 47.168 47.168 0 0 1 14.144-33.92 400.384 400.384 0 0 0 0-565.824 48 48 0 1 1 67.904-67.968 496.256 496.256 0 0 1 0 701.632 48 48 0 0 1-67.904 0z m-128-154.112a47.744 47.744 0 0 1-14.144-33.92 47.168 47.168 0 0 1 14.144-33.984 182.528 182.528 0 0 0 0-257.472 48 48 0 0 1 67.712-67.904 278.208 278.208 0 0 1 0 393.344 47.744 47.744 0 0 1-67.712 0z m-522.816-36.736a30.08 30.08 0 0 1-32-27.84V380.096a30.272 30.272 0 0 1 32-28.16h96v320z"
        p-id="17658"
      ></path>
    </svg>
  </span>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import type { IIconProps } from './type'
const props = withDefaults(defineProps<IIconProps>(), {
  size: 18,
  color: 'rgba(255, 255, 245, 0.86)'
})

// 计算样式
const styleCpd = computed(() => {
  return `fill:${props.color};width:${props.size}px;height:${props.size}px;`
})
</script>

<style scoped>
span {
  display: inline-block;
  box-sizing: border-box;
  padding: 0 10px;
}

.icon {
  cursor: pointer;
}

.icon:hover {
  opacity: 0.5;
}
</style>
